<template>
  <div class="login">
    <el-form
      :model="loginform"
      :rules="rules"
      ref="loginform"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="用户名" prop="name">
        <el-input v-model="loginform.name"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="pwd">
        <el-input v-model="loginform.pwd"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleLogin('loginform')"
          >登录</el-button
        >
        <el-button @click="resetForm('loginform')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      loginform: {
        name: "中秋节",
        pwd: "1234",
      },
      rules: {
        name: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
        pwd: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 4,
            max: 16,
            message: "长度在 4 到 16 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  mounted() {
    this.handleLogin();
  },
  methods: {
    //   handleLogin() {
    //     //登录
    //     let { name, pwd } = this.loginform;
    //     if (name == "中秋节" && pwd == "1234") {
    //       // 缓存
    //       sessionStorage.setItem("userName", name);
    //       // 跳转
    //       this.$router.push("/detail");
    //     } else {
    //       console.log("用户名和密码不匹配，提交失败!!");
    //     }
    //   },
    //   resetForm(formName) {
    //     this.$refs[formName].resetFields();
    //   },
    // },
    handleLogin() {
      let { name, pwd } = this.loginform;
      this.$http({
        methods: "post",
        url: "/get_login",
        data: { user: name, password: pwd },
      }).then((res) => {
        console.log(res);
        let { code, msg } = res.data;
        if (code == "200") {
          sessionStorage.setItem("userName", name);
          this.$router.push("/detail");
        } else {
          alert(msg);
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.login {
  .demo-ruleForm {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>